<template>
  <div class="container">
    <Breadcrumb :items="['menu.form', 'menu.form.step']" />
    <a-spin :loading="loading" style="width: 100%">
      <a-card class="general-card">
        <template #title>
          {{ $t('stepForm.step.title') }}
        </template>
        <div class="wrapper">
          <a-steps
            v-model:current="step"
            style="width: 580px"
            line-less
            class="steps"
          >
            <a-step description=" 配置表基础信息">
               配置基础表信息
            </a-step>

            <a-step description="配置字段基础信息">
              配置字段基础信息
            </a-step>

            <a-step description="完成创建">
              完成创建
            </a-step>

          </a-steps>
          <BaseInfo v-if="step === 1" @change-step="changeStep" :rowId="rowId" />
          <ColumnInfo v-else-if="step === 2" @change-step="changeStep" :rowId="rowId"/>
          <Success v-else-if="step === 3" @change-step="changeStep" :rowId="rowId"/>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

import useLoading from '@/hooks/loading';

import {useUserStore} from '@/store';
import {addForm, editForm, Table, Tables, TbConf, upDbTableColumnConf} from '@/api/dev';
import {useRouter} from "vue-router";
import {Message} from "@arco-design/web-vue";
import BaseInfo from './components/base-info.vue';
import ColumnInfo from './components/column-info.vue';
import Success from './components/success.vue';

const userStore = useUserStore();
  const { loading, setLoading } = useLoading(false);
  const step = ref(1);
  const submitModel = ref<Table>({} as Table);
  const tbConfModel = ref<TbConf[]>([] as TbConf[]);


  const router = useRouter();
  const rowId = ref();
  rowId.value = router.currentRoute.value.query.id

  const submitForm = async () => {
    setLoading(true);
    try {
      if(submitModel.value.id){
        const  {data} = await editForm(submitModel.value); // The mock api default success
        Message.success('保存成功');
      }else{
        const  {data} = await addForm(submitModel.value); // The mock api default success
        rowId.value = data
        Message.success('保存成功');
      }
      submitModel.value = {} as Table; // init
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };


const submitForm2 = async () => {
  setLoading(true);
  try {
    const param={
       configs:tbConfModel.value,
       baseId:rowId.value
    }
    await upDbTableColumnConf(param)
    tbConfModel.value = [] as TbConf[]; // init
    Message.success('保存成功');
  } catch (err) {
     console.log(err)
     throw  err
  } finally {
    setLoading(false);
  }
};

  const changeStep = async (
      direction: string | number,
      model: Tables| TbConf[]
  ) => {
    if (direction === 'submit1') {
      submitModel.value = {
        ...submitModel.value,
        ...model,
      };
      await submitForm();
      step.value += 1;
    } else if (direction === 'submit2') {
      tbConfModel.value.push(...model as TbConf[])
      await submitForm2();
      step.value += 1;
    } else if (direction === 'backward') {
      step.value -= 1;
    }
  };
</script>

<script lang="ts">
  export default {
    name: 'Step',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
    :deep(.arco-form) {
      .arco-form-item {
        &:last-child {
          margin-top: 20px;
        }
      }
    }
  }

  .steps {
    margin-bottom: 76px;
  }
</style>
